import React, { Component } from 'react';
import Mycalendar from 'react-calendar-zw';

class TheDate extends Component {
    state = {
        date: this.props.defautlDate,
        isShowDate: false,
    }
    inputDate = () => {
      this.setState({
        isShowDate: true
      })
    }
    dateChange = (date) => {
      this.setState({
        date: date,
        isShowDate: false,
      })
      this.props.setDate(date)
    }
    dateClear = () => {
      this.setState({
        date: "",
        isShowDate: false,
      })
      this.props.setDate("")
    }
    render() {
        return (
            <div>
              <input
                onClick={this.inputDate}
                value={this.props.defautlDate}
                type="text" size="10" maxLength="10" readOnly ></input>
                <Mycalendar
                    isShow={this.state.isShowDate}
                    datePickCallBack={this.dateChange}
                    clearBtnCallBack={this.dateClear}
                />
            </div>
        )
    }
}

export default TheDate;
